<template>
  <div class="noticeIndex">
    <x-header class="header" :left-options="{showBack: showHeaderBack,preventGoBack:true}" @on-click-back="goToPage" ref="header">消息通知</x-header>
    <div class="topHolder"></div>
    <grid class="iconList" :cols="2" :show-lr-borders="false" :show-vertical-dividers="false">
      <grid-item v-for="(item,index) in iconList" :key="index" class="item" :link="item.path" v-if="item.auth">
        <div class="itemWrap" :class="[item.class]">
          <i class="iconfont" :class="[item.icon]"></i><br/>
          <div class="text" v-text="item.name"></div>
          <span v-if="notifys.callNotice > 0 && index == 'callServices'" class="tips">
            <badge :text="notifys.callNotice"></badge>
          </span>
          <span v-if="notifys.presentNotice > 0 && index == 'requestPresent'" class="tips">
            <badge :text="notifys.presentNotice"></badge>
          </span>
          <span v-if="notifys.cardNotice > 0 && index == 'requestCard'" class="tips">
            <badge :text="notifys.cardNotice"></badge>
          </span>
          <span v-if="notifys.keepNotice > 0 && index == 'requestKeep'" class="tips">
            <badge :text="notifys.keepNotice"></badge>
          </span>
        </div>
      </grid-item>
    </grid>
  </div>
</template>

<script>
  import { Grid, GridItem, Badge } from 'vux'
  import {message} from "../../common/util";

  export default {
    name:'noticeIndex',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:false,
        iconList: {
          'callServices': {'auth':true, 'name': '呼叫服务列表','path': {path:'/callServicesList'}, 'class': 'call', 'icon': 'icon-xiaoxitongzhi'},
          'requestPresent': {'auth':false, 'name': '赠送请求审批','path': {path:'/requestPresentList'}, 'class': 'present', 'icon': 'icon-zengsong1'},
          'requestCard': {'auth':false, 'name': '办卡请求审批','path': {path:'/requestCardList'}, 'class': 'card', 'icon': 'icon-yudingshu'},
          'requestKeep': {'auth':false, 'name': '存酒请求审批','path': {path:'/requestKeepList'}, 'class': 'keep', 'icon': 'icon-jiu'},
          'normalNotice': {'auth':false, 'name': '一般通知','path': {path:'/normalNoticeList'}, 'class': 'normal', 'icon': 'icon-xiaoxitongzhi2'}
        }
      }
    },
    components:{
      Grid, 
      GridItem,
      Badge
    },
    computed:{
      notifys(){
        return this.$store.getters.getNotify
      },
      authority(){
        return this.$store.getters.getAuthorityNotice
      }
    },
    methods:{
      goToPage(){
        this.$router.push({path:'/'})
      },

    },
    mounted(){
      for(let key in this.iconList){
        if((this.authority.present == 'present_audit' || this.authority.present == 'present_audit_all') && key == 'requestPresent'){this.iconList[key].auth = true}
        if(this.authority.keep == 'keep_audit' && key == 'requestKeep'){this.iconList[key].auth = true}
        if(this.authority.card == 'card_audit' && key == 'requestCard'){this.iconList[key].auth = true}
      }
      this.$store.dispatch('fetchNotify',{callback:(status)=>{}})
      this.$store.commit('updateLoadingStatus',{isLoading:false})
    }
  }
</script>

<style lang="scss" scoped>
  .noticeIndex{
    .iconList{
      .vux-grid-item-no-border:after{border: none;}
      .item{
        .itemWrap{
          margin:2rem 0 0;padding:1.5rem 1rem 1rem;background: #eee;text-align: center;border-radius: 1rem;position: relative;
          .iconfont{font-size:3rem;}
          .text{margin-top: 0.5rem;font-size: 1rem;}
          .tips{
            position: absolute;top:-0.5rem;right:-0.3rem;
            .vux-badge{
              font-size:1.5rem;min-width:1.8rem;height:1.8rem;line-height: 1.8rem;border-radius: 1.5rem;
              &.vux-badge-single{width:auto;}
            }
          }
          &.call{
            background-color: #259B24;color: #fff;
            background-image: -webkit-linear-gradient(top,#1ad419,#259B24);
            background-image: -moz-linear-gradient(top,#1ad419,#259B24);
            background-image: -ms-linear-gradient(top,#1ad419,#259B24);
            background-image: -o-linear-gradient(top,#1ad419,#259B24);
            background-image: linear-gradient(top,#1ad419,#259B24);
            -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
          }
          &.present{
            background-color: #3a8ee6;color: #fff;
            background-image: -webkit-linear-gradient(top,#84b9f1,#3a8ee6);
            background-image: -moz-linear-gradient(top,#84b9f1,#3a8ee6);
            background-image: -ms-linear-gradient(top,#84b9f1,#3a8ee6);
            background-image: -o-linear-gradient(top,#84b9f1,#3a8ee6);
            background-image: linear-gradient(top,#84b9f1,#3a8ee6);
            -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
          }
          &.card{
            background-color: #ffb502;color: #fff;
            background-image: -webkit-linear-gradient(top,#ffd56f,#ffb502);
            background-image: -moz-linear-gradient(top,#ffd56f,#ffb502);
            background-image: -ms-linear-gradient(top,#ffd56f,#ffb502);
            background-image: -o-linear-gradient(top,#ffd56f,#ffb502);
            background-image: linear-gradient(top,#ffd56f,#ffb502);
            -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
          }
          &.keep{
            background-color: #E51C23;color: #fff;
            background-image: -webkit-linear-gradient(top, #f77c7c,#E51C23);
            background-image: -moz-linear-gradient(top,#f77c7c,#E51C23);
            background-image: -ms-linear-gradient(top,#f77c7c,#E51C23);
            background-image: -o-linear-gradient(top,#f77c7c,#E51C23);
            background-image: linear-gradient(top,#f77c7c,#E51C23);
            -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
          }
          &.normal{
            background-color: #e9e9e9;
            background-image: -webkit-linear-gradient(top,#ffffff,#e9e9e9);
            background-image: -moz-linear-gradient(top,#ffffff,#e9e9e9);
            background-image: -ms-linear-gradient(top,#ffffff,#e9e9e9);
            background-image: -o-linear-gradient(top,#ffffff,#e9e9e9);
            background-image: linear-gradient(top,#ffffff,#e9e9e9);
            -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
          }
        }
        &.item:nth-child(even){padding:0 2rem 0 1rem;}
        &.item:nth-child(odd){padding:0 1rem 0 2rem;}
      }
    }
  }
</style>
